<div class="box data_box" style="background: #ffffff">
    <h3 style="margin-left: 30px;padding-bottom: 10px;" >
        部门管理
        <button type="button" class="btn btn-default" style="float: right; margin-right: 20px;" @click="addDept" >添加部门</button>
    </h3>
    <div class="box-body table-responsive no-padding">
        <table class="table table-bordered ">
            <tr style="background: #5bc0de">
                <th>部门编号</th>
                <th>部门名称</th>
                <th>部门状态</th>
                <th>部门创建时间</th>
                <th>部门修改时间</th>
                <th>部门经理</th>
                <th class="col-xs-3">部门描述</th>
                <th>操作</th>
            </tr>
            <tbody id="tbodyId">
            <tr v-for ="item in dept_list">
                <td>{{item.id }}</td>
                <td>{{item.deptname  }}</td>
                <td>{{item.deptstatus | changeStatus }}</td>
                <td>{{item.createtime | subTime }}</td>
                <td>{{item.edittime | subTime }}</td>
                <td>{{item.deptleaderid | empName }}</td>
                <td>{{item.descri | isNull }}</td>
                <td>
                    <button type="button" class="btn btn-success btn-xs"  @click = "deptChange(item)" >修改</button>
                    <button v-if ="item.deptstatus == '0' " type="button" class="btn btn-warning btn-xs" @click ="deptStart(item)" >启用</button>
                    <button v-if ="item.deptstatus == '1' " type="button" class="btn btn-danger btn-xs dept-stop"  @click ="deptStop(item)" >停用</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <!-- 部门添加框 -->
    <div class="modal fade" id="add-dept-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">{{ deptModaltitle }}</h4>
                </div>
                <div class="modal-body">
                    <!-- 表单内容 -->
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">部门名称</label>
                            <div class="col-sm-10">
                                <input v-if="deptItem.id == null" type="text" class="form-control dept-name" placeholder="部门名称" v-model ="deptItem.deptname" >
                                <input v-else= type="text" class="form-control dept-name" placeholder="部门名称"  v-model ="deptItem.deptname" readonly >
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">部门描述</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" rows="3"  placeholder="部门描述" v-model = "deptItem.descri"></textarea>
                            </div>
                        </div>
                        <div class="form-group"  v-if="deptItem.id != null">
                            <label class="col-sm-2 control-label">部门经理</label>
                            <div class="col-sm-10">
                                <!-- 从该部门人员下查询，暂放 -->
                                <select class="form-control" v-model = "deptItem.deptleaderid">
                                    <option v-for ="item in dept_emp_list" :value="item.id" >{{ item.name }}</option>

                                </select>
                            </div>
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" @click="savedept">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/vue.min.js"></script>
<script src="js/vue-resource.min.js"></script>
<script type="text/javascript">
    var  dept_emp_list = [];
    $.ajax({
        url : "/emp/page",
        data : {  startrow : 0, pagesize  : 1000,},
        success : function (res) {
            dept_emp_list = res.data;
        }
    });
    // 文档就绪函数
    $(function(){
        getList();
        function getList(){
            Vue.http.get('/dept/list').then(function(res) {
                deptVue._data.dept_list = res.data.data;
            });
        }
        var deptVue = new Vue({
            el : ".data_box" ,
            data : {
                dept_list : [],
                deptModaltitle : "",
                deptItem : {},
                emp_list : [],
            },
            filters : {
                isNull : function(str){
                    if(str == null){
                        return '暂无';
                    }else{
                        return str;
                    }
                },
                changeStatus : function(str){
                    if(str == "0"){
                        return "停用"
                    }else if(str == "1"){
                        return "正常运行"
                    }
                },
                subTime : function (str) {
                    if(str != null){
                        return str.substr(0,10);
                    } else{
                        return '暂无';
                    }

                },empName : function (str) {
                    var empName = "暂无";
                    // 查询所有人员信息
                    for (var i = 0;i< dept_emp_list.length;i++){
                        if(dept_emp_list[i].id.toString() == str){
                            empName = dept_emp_list[i].name;
                        }
                    }
                    return empName;
                }
            },
            methods : {
                addDept : function(){
                    this.deptModaltitle="部门添加";
                    this.deptItem = {};
                    $("#add-dept-modal").modal('show');
                },
                deptChange : function (item){
                    this.deptModaltitle="部门修改";
                    this.deptItem = item;
                    // 获取人员信息
                    var params = {
                        startrow : 0,
                        pagesize   : 100,
                        deptid : this.deptItem.id,
                    }
                    $.post("/emp/page",params,function(res){
                        deptVue._data.dept_emp_list = res.data;
                    });
                    $("#add-dept-modal").modal('show');
                },
                deptStart : function(item){
                    // 启用
                    var params = {
                        id : item.id,
                        deptname : item.deptname,
                        deptstatus :  1,
                        createtime  : item.createtime,
                        deptleaderid : item.deptleaderid,
                        descri : item.descri,
                    }
                    $.post("/dept/updata",params,function(res){
                        window.location.reload();
                        if(res.state == 1){
                            alert("启用成功");
                        }else{
                            alert("启用失败");
                        }
                    });

                },
                deptStop : function(item){
                    // 停用
                    var params = {
                        id : item.id,
                        deptname : item.deptname,
                        deptstatus :  0,
                        createtime  : item.createtime,
                        deptleaderid : item.deptleaderid,
                        descri : item.descri,
                    }
                    $.post("/dept/updata",params,function(res){
                        window.location.reload();
                        if(res.state == 1){
                            alert("停用成功");
                        }else{
                            alert("停用失败");
                        }
                    });

                },savedept : function(){
                    // 判断新增还是修改
                    var params = {
                        id : this.deptItem.id,
                        deptname : this.deptItem.deptname,
                        deptstatus : this.deptItem.deptstatus,
                        createtime  : this.deptItem.createtime,
                        deptleaderid : this.deptItem.deptleaderid,
                        descri :  this.deptItem.descri,
                    }
                    /*  var  params = this.deptItem;*/

                    if(this.deptItem.id != null){
                        // 修改
                        /*    this.$http.post("/dept/updata",params).then(function (res) {
                                if(res.data.status == 1){
                                    alert("修改成功");
                                }else{
                                    alert("修改失败");
                                }

                            });*/ //vue的http请求参数格式默认是(view)对象，后台springmvc接受只能用formData（表单对象）,可以修改，但是麻烦
                        $.post("/dept/updata",params,function(res){
                            if(res.state == 1){
                                alert("修改成功");
                                $("#add-dept-modal").modal('hide');
                            }else{
                                alert("修改失败");
                                $("#add-dept-modal").modal('hide');
                            }
                        });
                    }else{
                        // 新增
                        $.post("/dept/add",params,function(res){
                            if(res.state == 1){
                                alert("添加成功");
                                $("#add-dept-modal").modal('hide');
                            }else{
                                alert("添加失败");
                                $("#add-dept-modal").modal('hide');
                            }
                        });
                    }
                    getList();
                },
            },
        });

    });


</script>